<template>
	<z-paging-swiper ref="paging" class="z-paging">
		<template v-slot:top>
			<z-tabs ref="tabs" :current="current" :list="tabList" @change="tabsChange"></z-tabs>
		</template>
		<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
		<swiper class="swiper" :current="current" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
				<item-vue :key="item.value" :type="item.value" :tabIndex="index" :currentIndex="current" />
			</swiper-item>
		</swiper>
	</z-paging-swiper>
</template>

<script setup>
import itemVue from './item.vue';
import http from '@/common/request.js';
import HeadNav from '@/components/ar-nav/nav.vue';
import { onLoad, onUnload } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';

// 进行中，已完成，已作废
// 进行中功能- 【作废、换车、更换司机】
// 已完成中区分-【已付款，未付款】
// 已作废中功能-【重新提交填报】

// 状态 0未开始 1进行中(填完需求提交) 2已完成(审核完成)
const tabList = ref([
	{ name: '进行中', value: 1 },
	{ name: '已完成', value: 2 },
	{ name: '已作废', value: 3 }
]);

const current = ref(0);

const animationfinish = (d) => {
	current.value = d.detail.current;
};

const tabsChange = (tc) => {
	current.value = tc;
};
</script>

<style lang="scss" scoped>
.swiper {
	height: 100%;
}
</style>
